<template>
    <div class="add-center w-100 h-100">
        <el-card class="box-card-table h-100" shadow="never">
            <div slot="header" class="clearfix">
                <span class="fl">教案详情</span>
                <el-button class="fr" @click="goback" style="padding:6px;">返回</el-button>
            </div>
            <div class="h-100">
                <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="主题名称：" prop="bTC_Name">
                        <span>{{ruleForm.bTC_Name}}</span>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="授课人：" prop="bTID">
                                <span>{{ruleForm.bTID | getTeacherName(teacherList)}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="学生：" prop="bSID">
                                <span>{{ruleForm.bSID | getStudyName(studyList)}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="授课时间：" prop="bTC_Time">
                                <span>{{ruleForm.bTC_Time}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="班级：" prop="bClass">
                                <span>{{ruleForm.bClass}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="课时：" prop="bTC_Ks">
                                <span>{{ruleForm.bTC_Ks}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="课型：" prop="bTC_Kx">
                                <span>{{ruleForm.bTC_Kx}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="教学内容：" prop="bTC_Content">

                        <div>{{ruleForm.bTC_Content}}</div>
                    </el-form-item>
                    <el-form-item label="教学目标：" prop="bTC_aims">
                        <div>{{ruleForm.bTC_aims}}</div>
                    </el-form-item>
                    <el-form-item label="教具准备：" prop="bTC_Zb">
                        <div>{{ruleForm.bTC_Zb}}</div>
                    </el-form-item>
                    <el-form-item label="" prop="bTC_Zb">
                        <img style="width:310px;height:300px;" :src="ruleForm.bTC_Photo" alt="附图">
                    </el-form-item>
                    <el-form-item label="教学过程：" prop="bTC_gc">
                        <div v-html="ruleForm.bTC_Zb"></div>
                    </el-form-item>
                    <el-form-item label="教学后记：" prop="bTC_Hj">

                        <div>{{ruleForm.bTC_Hj}}</div>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
import elewarp from '@/components/warp-slot.vue'
import {getCenterInfo} from '@/api/index.js'

export default {
    name: 'center-des',
    components: {
        elewarp,
        // eleAddStudy
    },
    data() {
        return {
            ruleForm:{
                bTC_Name:'',	
                bTC_Photo:'',	
                bSID:'',	
                bClass:'',	
                bTC_Time:'',	
                bTC_Ks:'',	
                bTC_Kx:'',	
                bTID:'',	
                bTC_Content:'',	
                bTC_aims:'',	
                bTC_Zb:'',	
                bTC_gc:'',	
                bTC_Hj:'',
            },
        }
    },
    computed:{
        teacherList() {
            return this.$store.state.allTeacherList;
        },
        studyList() {
            return this.$store.state.allStudyList;
        }
    },
    created(){
        this.centerid = this.$route.query.id;
        if(this.centerid) {
            this._getCenterInfo();
        }
    },
    methods:{
        _getCenterInfo(){
            getCenterInfo({bTCID:this.centerid}).then((res) => {
                if(res) {
                    console.log(res)
                    for (const key in this.ruleForm) {
                        if (this.ruleForm.hasOwnProperty(key)) {
                            let _key = key.substr(1);
                            if( _key in res) {
                                this.ruleForm[key] = res[_key];
                            }
                        }
                    }
                }
            })
        },
        goback(){
            this.$router.push({path:'/center/center-list'})
        }
    }
}
</script>
<style lang="less">
.add-center{
    .line-height{
        line-height: 20px;
    }
}
.add-center{
    .el-card__body{
        height:calc(100% - 70px);
        box-sizing: border-box;
    }
    .box-card-table{
        overflow-y: auto;
        box-sizing: border-box;
    }
}
</style>
